import {Component, OnInit, Input} from '@angular/core';
import Map from 'ol/Map.js';
import Polygon from 'ol/geom/Polygon.js';
import Draw, {createRegularPolygon, createBox} from 'ol/interaction/Draw.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {OSM, Vector as VectorSource} from 'ol/source.js';
import {UtilComponent} from '../../interface/util-component.interface';

@Component({
    selector: 'kylin-shape',
    templateUrl: './shape.component.html',
    styleUrls: ['./shape.component.less']
})

export class ShapeComponent implements OnInit, UtilComponent {
    // ---------- 接口实现 begin -------------- //
    hasContent = true;
    map: Map;

    @Input() set data(val) {
        Object.assign(this, val);
    };

    // ---------- 接口实现 end ---------------- //
    selectedValue = 'Circle';
    shapeList: any[] = [
        {
            label: '圆圈',
            value: 'Circle'
        },
        {
            label: '正方形',
            value: 'Square'
        },
        {
            label: '矩形',
            value: 'Box'
        },
        {
            label: '星星',
            value: 'Star'
        },
        {
            label: 'none',
            value: 'None'
        },
    ];
    raster;
    source;
    vector;
    draw;
    constructor() {
    }
    ngOnInit() {
        this.starMap()
    }

    starMap() {
        this.raster = new TileLayer({
            source: new OSM()
        });
        this.source = new VectorSource({wrapX: false});

        this.vector = new VectorLayer({
            source: this.source
        });
        this.map.addLayer(this.vector);
        this.addInteraction(this.selectedValue);
    }


    provinceChange(e) {
        this.map.removeInteraction(this.draw);
        this.selectedValue = e;
        this.addInteraction(this.selectedValue);
    }

    addInteraction(value) {
        if (value !== 'None') {
            let geometryFunction;
            if (value === 'Square') {
                value = 'Circle';
                geometryFunction = createRegularPolygon(4);
            } else if (value === 'Box') {
                value = 'Circle';
                geometryFunction = createBox();
            } else if (value === 'Star') {
                value = 'Circle';
                geometryFunction = function (coordinates, geometry) {
                    const center = coordinates[0];
                    const last = coordinates[1];
                    const dx = center[0] - last[0];
                    const dy = center[1] - last[1];
                    const radius = Math.sqrt(dx * dx + dy * dy);
                    const rotation = Math.atan2(dy, dx);
                    const newCoordinates = [];
                    const numPoints = 12;
                    for (let i = 0; i < numPoints; ++i) {
                        const angle = rotation + i * 2 * Math.PI / numPoints;
                        const fraction = i % 2 === 0 ? 1 : 0.5;
                        const offsetX = radius * fraction * Math.cos(angle);
                        const offsetY = radius * fraction * Math.sin(angle);
                        newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
                    }
                    newCoordinates.push(newCoordinates[0].slice());
                    if (!geometry) {
                        geometry = new Polygon([newCoordinates]);
                    } else {
                        geometry.setCoordinates([newCoordinates]);
                    }
                    return geometry;
                };
            }
            this.draw = new Draw({
                source: this.source,
                type: value,
                geometryFunction: geometryFunction
            });
            this.map.addInteraction(this.draw);
        }
    }


    cancel(options?: any): any {
        this.map.removeLayer(this.vector);
        this.map.removeInteraction(this.draw)
    }
}


